import { defineComponent } from 'vue';
import { h, withDirectives } from 'vue';

const MyComponent = defineComponent({
  setup() {
    // 局部注册自定义指令
    const customDirective = {
      mounted(el, binding) {
        const value = binding.value;
        const argument = binding.arg;
        const modifiers = binding.modifiers;
        if (argument === 'left') {
          el.style.position = 'absolute';
          el.style.left = value + 'px';
        } else if (argument === 'top') {
          el.style.position = 'absolute';
          el.style.top = value + 'px';
        }
        if (modifiers.animate) {
          el.style.transition = 'all 5s ease';
        }
      },
      updated(el, binding) {
        const value = binding.value;
        const argument = binding.arg;
        if (argument === 'left') {
          el.style.left = value + 'px';
        } else if (argument === 'top') {
          el.style.top = value + 'px';
        }
      }
    };

    return () => {
      const vnode = withDirectives(<div>ooo</div>, [
        [customDirective, 200, 'top', { animate: true }]
      ]);
      return (vnode)
    };
  }
});

export default MyComponent;